{"componentChunkName":"component---src-templates-blog-post-js","path":"/How-to-build-a-Pixel-Art-Drawing-App-in-React/","result":{"data":{"site":{"siteMetadata":{"title":"Aleks Popovic - personal website and blog"}},"markdownRemark":{"id":"694baac9-5649-5c11-842d-3adb16cf6b0d","excerpt":"Pixel art games have been making a huge comeback in recent years, but this time not because we are limited by technology, but because pixel art is really great…","html":"

Pixel art games have been making a huge comeback in recent years, but this time not because we are limited by technology, but because pixel art is really great. Some game developers are adjusting their workflows to transform their end product into a pixel art game even though they might start with 3d modeling at first. Others go the usual way of drawing sprites in a Pixel Art Editor and that is exactly what we are going to build today. We will go over how to generate a dynamic pixel grid, how to set up a color picker, how to actually draw pixels and in the end how to export your finished pixel art into a png image.

\n

If you prefer a video version you can watch me build this on Youtube:

\n
\n

I started a new React app by running create-react-app command in my working folder.

\n
create-react-app pixels
\n

For this project I will focus more on the React part of the code, but there will be a SandBox link to a full code example that includes the CSS files as well. I mainly used flexbox to center elements, and that’s pretty much 80% of the CSS used. The rest is adding custom colors and margins for separation between elements.

\n

To start off - I removed all unnecessary code from App.js and I imported the Editor component, which is going to be the heart of this app.

\n
import \"../styles/App.scss\"\nimport Editor from \"./Editor\"\n\nfunction App() {\n  return (\n    <div className=\"App\">\n      <Editor />\n    </div>\n  )\n}\n\nexport default App
\n

Next we need to set up the Editor.

\n
import React, { useState } from \"react\"\nimport \"../styles/editor.scss\"\n\nexport default function Editor() {\n  return (\n    <div id=\"editor\">\n      <h1>Pixel Editor</h1>\n      <h2>Enter Panel Dimensions</h2>\n\n      <div id=\"options\">\n        <div className=\"option\">\n          <input type=\"number\" className=\"panelInput\" />\n          <span>Width</span>\n        </div>\n        <div className=\"option\">\n          <input type=\"number\" className=\"panelInput\" />\n          <span>Height</span>\n        </div>\n      </div>\n\n      <button className=\"button\">Start Drawing</button>\n    </div>\n  )\n}
\n

We have a coupled of heading elements and some input fields which we will use to dynamically set the drawing panel’s width and height. There is also a button which we will use to hide the options and initialize the drawing panel, but also to reset the pixel grid if the user wants to start over. To do that we need to set up some useState hooks.

\n
import React, { useState } from \"react\"\nimport \"../styles/editor.scss\"\n\nexport default function Editor() {\n  const [panelWidth, setPanelWidth] = useState(16)  const [panelHeight, setPanelHeight] = useState(16)  const [hideOptions, setHideOptions] = useState(false)  const [hideDrawingPanel, setHideDrawingPanel] = useState(true)  const [buttonText, setButtonText] = useState(\"start drawing\")  const [selectedColor, setColor] = useState(\"#f44336\")\n  function initializeDrawingPanel() {    setHideOptions(!hideOptions)    setHideDrawingPanel(!hideDrawingPanel)    buttonText === \"start drawing\"      ? setButtonText(\"reset\")      : setButtonText(\"start drawing\")  }\n  return (\n    <div id=\"editor\">\n      <h1>Pixel Editor</h1>\n      {hideDrawingPanel && <h2>Enter Panel Dimensions</h2>}      {hideDrawingPanel && (        <div id=\"options\">\n          <div className=\"option\">\n            <input\n              type=\"number\"\n              className=\"panelInput\"\n              defaultValue={panelWidth}              onChange={e => {                setPanelWidth(e.target.value)              }}            />\n            <span>Width</span>\n          </div>\n          <div className=\"option\">\n            <input\n              type=\"number\"\n              className=\"panelInput\"\n              defaultValue={panelHeight}              onChange={e => {                setPanelHeight(e.target.value)              }}            />\n            <span>Height</span>\n          </div>\n        </div>\n      )}      <button onClick={initializeDrawingPanel} className=\"button\">        {buttonText}      </button>    </div>\n  )\n}
\n

With useState we are controlling the width and height of the drawing panel. I’ve also added some properties to control the element visibility. After you set up the dimensions and click the button to start drawing - all of the options will be hidden until we click our repurposed Reset button.

\n

A drawing app wouldn’t be very useful without any colorin options. For this project I decided to use a plugin react-color which has a lot of different color picker options. I’ve chosen their CirclePicker component, but you can find the full list of possibilities on their website, and they all work in a similar way.

\n

You can install it by running

\n
npm install react-color
\n

Now we need to set it up.

\n
import React, { useState } from \"react\"\nimport \"../styles/editor.scss\"\nimport { CirclePicker } from \"react-color\"\nexport default function Editor() {\n  const [panelWidth, setPanelWidth] = useState(16)\n  const [panelHeight, setPanelHeight] = useState(16)\n  const [hideOptions, setHideOptions] = useState(false)\n  const [hideDrawingPanel, setHideDrawingPanel] = useState(true)\n  const [buttonText, setButtonText] = useState(\"start drawing\")\n  const [selectedColor, setColor] = useState(\"#f44336\")\n\n  function initializeDrawingPanel() {\n    setHideOptions(!hideOptions)\n    setHideDrawingPanel(!hideDrawingPanel)\n\n    buttonText === \"start drawing\"\n      ? setButtonText(\"reset\")\n      : setButtonText(\"start drawing\")\n  }\n\n  function changeColor(color) {    setColor(color.hex)  }\n  return (\n    <div id=\"editor\">\n      <h1>Pixel Editor</h1>\n      {hideDrawingPanel && <h2>Enter Panel Dimensions</h2>}\n      {hideDrawingPanel && (\n        <div id=\"options\">\n          <div className=\"option\">\n            <input\n              type=\"number\"\n              className=\"panelInput\"\n              defaultValue={panelWidth}\n              onChange={e => {\n                setPanelWidth(e.target.value)\n              }}\n            />\n            <span>Width</span>\n          </div>\n          <div className=\"option\">\n            <input\n              type=\"number\"\n              className=\"panelInput\"\n              defaultValue={panelHeight}\n              onChange={e => {\n                setPanelHeight(e.target.value)\n              }}\n            />\n            <span>Height</span>\n          </div>\n        </div>\n      )}\n      <button onClick={initializeDrawingPanel} className=\"button\">\n        {buttonText}\n      </button>\n      {hideOptions && (        <CirclePicker color={selectedColor} onChangeComplete={changeColor} />      )}    </div>\n  )\n}
\n

The color propc in the CirclePicker is used to mark which color is currently selected, useChangeComplete is the component’s event which you can use to trigger an action. In our case, after selecting a different color from the picker we want to switch our selected color state.

\n

The only thing left to do in the Editor is to add the DrawingPanel component which we yet need need to build out.

\n

We import the component the usual way:

\n
import DrawingPanel from \"./DrawingPanel\"
\n

We can add it into our code right below the button:

\n
{\n  hideOptions && (\n    <DrawingPanel\n      width={panelWidth}\n      height={panelHeight}\n      selectedColor={selectedColor}\n    />\n  )\n}
\n

Here is what the DrawingPanel component looks like:

\n
import React, { useRef } from \"react\"\nimport \"../styles/drawingPanel.scss\"\nimport Row from \"./Row\"\n\nexport default function DrawingPanel(props) {\n  const { width, height, selectedColor } = props\n\n  let rows = []\n\n  for (let i = 0; i < height; i++) {\n    rows.push(<Row key={i} width={width} selectedColor={selectedColor} />)\n  }\n\n  return (\n    <div id=\"drawingPanel\">\n      <div id=\"pixels\">{rows}</div>\n    </div>\n  )\n}
\n

Based on the entered height we generate the same number of rows and we push them to a div container, but we also need to pass in our width to each Row component so we know how many “pixels” per row we need to generate. Next we need to set up the Row component, but we will come back to the DrawingPanel to set up our exporting to PNG.

\n
import React from \"react\"\nimport \"../styles/row.scss\"\nimport Pixel from \"./Pixel\"\n\nexport default function Row(props) {\n  const { width, selectedColor } = props\n\n  let pixels = []\n\n  for (let i = 0; i < width; i++) {\n    pixels.push(<Pixel key={i} selectedColor={selectedColor} />)\n  }\n\n  return <div className=\"row\">{pixels}</div>\n}
\n

As you can see - we are generating pixels per row in the same way we are setting up rows in the drawing panel. Now we need to set up the Pixel component and we are almost done!

\n
import React, { useState } from \"react\"\nimport \"../styles/pixel.scss\"\n\nexport default function Pixel(props) {\n  const { selectedColor } = props\n\n  const [pixelColor, setPixelColor] = useState(\"#fff\")\n  const [oldColor, setOldColor] = useState(pixelColor)\n  const [canChangeColor, setCanChangeColor] = useState(true)\n\n  function applyColor() {\n    setPixelColor(selectedColor)\n    setCanChangeColor(false)\n  }\n\n  function changeColorOnHover() {\n    setOldColor(pixelColor)\n    setPixelColor(selectedColor)\n  }\n\n  function resetColor() {\n    if (canChangeColor) {\n      setPixelColor(oldColor)\n    }\n\n    setCanChangeColor(true)\n  }\n\n  return (\n    <div\n      className=\"pixel\"\n      onClick={applyColor}\n      onMouseEnter={changeColorOnHover}\n      onMouseLeave={resetColor}\n      style={{ backgroundColor: pixelColor }}\n    ></div>\n  )\n}
\n

I wanted to have a visual indicator for being able to draw instead of just having a cursor change to pointer through CSS. So, I’ve set up some more useState hooks to help with that. The idea here is that we want to temporarily change the pixel’s color when we hover it. If we hover out, we want to return it to its old color, which we store as a separate state. However, if we click on it before hovering out, we want to permanently set that color, and for that reason we have a helper state property canChangeColor to prevent onMouseLeave messing up our color change.

\n

We are done with setting up the drawing functions, which means the only thing left is to set up our exporting. Back to the DrawingPanel component!

\n

First we need to install the exporting plugin:

\n
npm install react-component-export-image
\n

After that we need to set it up with a useRef hook. The plugin needs a reference to a component or element that is being exported to an image.

\n
import React, { useRef } from \"react\"import \"../styles/drawingPanel.scss\"\nimport Row from \"./Row\"\n\nimport { exportComponentAsPNG } from \"react-component-export-image\"\nexport default function DrawingPanel(props) {\n  const { width, height, selectedColor } = props\n\n  const panelRef = useRef()\n  let rows = []\n\n  for (let i = 0; i < height; i++) {\n    rows.push(<Row key={i} width={width} selectedColor={selectedColor} />)\n  }\n\n  return (\n    <div id=\"drawingPanel\">\n      <div id=\"pixels\" ref={panelRef}>        {rows}\n      </div>\n      <button onClick={() => exportComponentAsPNG(panelRef)} className=\"button\">        Export as PNG      </button>    </div>\n  )\n}
\n

Now if you draw something in the panel and click our new export button you should get a new PNG image with your exported component. You can also use this plugin to export components to JPEG and PDF formats.

\n

And that is all of the code I’ve used for this project, except for the CSS. If you are interested into seeing the full working version you can check out the project on CodeSandbox.

\n
\n
If you have any questions or comments you can reach out to me on Twitter and Instagram, where I also post interesting code tidbits and designs.\n

I also have a YouTube channel where I regularly upload React and web dev tutorials, so if that’s your cup of tea feel free to support me by subscribing.

","frontmatter":{"title":"How to build a Pixel Art Drawing App in React","series":null,"seriesLink":null,"date":"December 05, 2020","description":"Pixel art games have been making a huge comeback in recent years, but this time not because we are limited by technology, but because pixel art is really great. Some game developers are adjusting their workflows to transform their end product into a pixel art game even though they might start with 3d modeling at first. Others go the usual way of drawing sprites in a Pixel Art Editor and that is exactly what we are going to build today. We will go over how to generate a dynamic pixel grid, how to set up a color picker, how to actually draw pixels and in the end how to export your finished pixel art into a png image.","tags":["web","react"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAB/klEQVQoz1WRXU+SYRjHOahhra3WkfnCizxAvD7w8PCmgICYEtqiUGYkTBSTgmi1FktrUivzpCw329paW5u5DlqetPwI2SfoqJNO+ha/nodh5cG1+951X9fv+v+vWzNw1ks7rB5Mymm0eJC9YarnzuN3+TEqOTVv8ccxOWSMVlGplTAIIv0DTuWuvnva/WpoVJjaZOwA+y0iKW+ElcRlfKERunVW7IOjxFtbSLl5evQ2Fmfn2H6yTKtaxCOFMCg9ps5gjbGjUAW2lZpFzHKIWDJK4WKBbK6I4IsSqT3EPT6F3uTk1WqLD61lNm8vEYsm0ClqhQPgX8sd22psvX7Dt2aSHxsy+/t7uF0RxnyjDHniykpEdtYe87F5l2dXp8kkR+gzuRBs0j/ggTqTkjyjs/Bpd4/fn+/xpazn19dtJjN55oamKAxOKjUBZmcWeJDLc8EjEgwOo7fJCFZ3m6H5X53Z4eNUt8DTR/f5+W6dSnGH77svqNUbCHoHQqLAiXAdV7rJSnmepYkUzrEFjiXvYAhkECyuw5ZVhT16O9npGd5urPF+9TkvS4uE5DCG4TynL21y1FlG679FbKJBKl1CG7zOEbnKyXAFwRk8DFStq8vtVT5m3BWgEQiRdkqY7TK92XW07mtorVfo8tfRSDfReGscD96gy1tRBpXokzL8Ad1CGuQcSTBZAAAAAElFTkSuQmCC","aspectRatio":2.6666666666666665,"src":"/static/289cf244f4327c29c8bdd92f75c2f460/0e6e2/pixels.png","srcSet":"/static/289cf244f4327c29c8bdd92f75c2f460/b460a/pixels.png 480w,\n/static/289cf244f4327c29c8bdd92f75c2f460/6e898/pixels.png 960w,\n/static/289cf244f4327c29c8bdd92f75c2f460/0e6e2/pixels.png 1920w","srcWebp":"/static/289cf244f4327c29c8bdd92f75c2f460/30cf3/pixels.webp","srcSetWebp":"/static/289cf244f4327c29c8bdd92f75c2f460/35871/pixels.webp 480w,\n/static/289cf244f4327c29c8bdd92f75c2f460/fcc10/pixels.webp 960w,\n/static/289cf244f4327c29c8bdd92f75c2f460/30cf3/pixels.webp 1920w","sizes":"(max-width: 1920px) 100vw, 1920px"}}}}}},"pageContext":{"slug":"/How-to-build-a-Pixel-Art-Drawing-App-in-React/","previous":{"excerpt":"If you are a developer you probably have a GitHub account, and if you’re like me your profile page is probably empty. I would even say…","fields":{"slug":"/Easiest-way-to-set-up-your-Github-profile-page/"},"frontmatter":{"date":"November 27, 2020","title":"Easiest way to set up your GitHub profile page","series":null,"description":"If you are a developer you probably have a GitHub account, and if you're like me your profile page is probably empty. I would even say barren. Utterly uninteresting? If that's true then you are at the right place, because in this tutorial I am going to show you some quick and easy tips to make your GitHub profile at least somewhat presentable.","tags":["productivity","github"],"featuredImage":{"id":"7f327b1f-be71-54ba-bd4a-523d4f96e39f","publicURL":"/static/cc4780a5217804212e07214ae02b06ca/github.png","relativeDirectory":"Easiest-way-to-set-up-your-Github-profile-page","relativePath":"Easiest-way-to-set-up-your-Github-profile-page/github.png"}}},"next":{"excerpt":"Can you become more productive by making a productivity app? Not sure about that, but you can definitely become more productive by building…","fields":{"slug":"/Building-a-Task-Management-App-in-React/"},"frontmatter":{"date":"December 12, 2020","title":"Building a Task Management App in React","series":null,"description":"Can you become more productive by making a productivity app? Not sure about that, but you can definitely become more productive by building new projects and a task management app has been on my mind for a long time now. I decided to build it in React without using any additional plugins except node-sass which allows you to use .scss files in your project.","tags":["web","react"],"featuredImage":{"id":"f17b6ed1-1e33-5fe7-821f-11b06daf5d17","publicURL":"/static/1312c0bcf30a703d64ed453a69a090d5/task.png","relativeDirectory":"Building-a-Task-Management-App-in-React","relativePath":"Building-a-Task-Management-App-in-React/task.png"}}}}}}